/*
	应用性能指数图
*/
define(
	[
		'require',
		'echarts',
		'echarts/chart/pie',
		'zrender/tool/util'
	],
	function (require) {
		"use strict";

		var echarts = require('echarts');
		var zrUtil = require('zrender/tool/util');

		var forEach = Ember.EnumerableUtils.forEach;
		var map = Ember.EnumerableUtils.map;

		var defaultOption = {
					tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    color: ['#3caaf7','#bb7afd','#81f26f','#f5504e','#f79f00'],
				    legend: {
				        orient : 'vertical',
				        x : 'right',
				        y : 'center',
				        data:['Google Chrome','FireFox','Safari','Opera','Internet Explorer'],
				        textStyle:{
				        	color:"#fff"
				        }
				    },
				    calculable : true,
				    series : [
				        {
				            name:'',
				            type:'pie',
				            radius : '50%',
				            center: ['40%', '50%'],
				            itemStyle: {
							    normal: {
							        label: {
							            show: true,
							            position: 'outer',
							            formatter: "{d}%"
							        },
							        labelLine: {
							            show: true,
							            length: 0
							        },

							    }
							},
				            data:[
				                {value:335, name:'Google Chrome'},
				                {value:310, name:'FireFox'},
				                {value:234, name:'Safari'},
				                {value:135, name:'Opera'},
				                {value:1548, name:'Internet Explorer'}
				            ]
				        }
				    ]
				};

		var PieView = Ember.Component.extend({
			didInsertElement: function(){
				var $dom = this.$();

				this.width = this.width||$dom.width();
				this.height = this.height||$dom.height();

				if(this.width === 0 || this.height === 0){
					Ember.assert("必须指定视图的width和height。（可通过样式或width，height属性");
					return;
				}

				this._initNormalChart();
			},

			/**
			 * 初始化概览图表
			 */
			_initNormalChart: function(){
				var $dom = this.$();

				if(G_vmlCanvasManager && G_vmlCanvasManager.init){
					G_vmlCanvasManager.initElement($dom[0]);
				}

				var overviewChart = echarts.init($dom[0]);
				//overviewChart.setOption(defaultOption);
				this.overviewChart = overviewChart;
				this.detailDataChange();
			},

			/**
			 * 数据改变后, 根据显示模式设置为相应的数据
			 */
			dataChange: Ember.observer("data", function(){
				this.detailDataChange();
			}),

			/**
			 * 详细数据改变后, 刷新概览图表
			 */
			detailDataChange: function(){
				if(!this.overviewChart){
					return;
				}

				var option = zrUtil.clone(defaultOption);

				option.series[0].name = this.get("sName")||"";

				var data = this.get("data")||[];
				var legendData = option.legend.data = [];
				var seriesData = option.series[0].data = [];

				this._translateDataToOption(data, legendData, seriesData);
				this._calculable(data, option);
				//后期可用指定颜色，顺序执行option.color=['#FF7F50','#87CEFA','#DA70D6','#32CD32','#6495ED','#8D98B3'];
				this.overviewChart.clear();
				this.overviewChart.setOption(option, true);
				this.overviewChart.hideLoading();
			},

			_calculable : function (data, option) {
				var ctrl = this;
				forEach(data, function(performance){
					if(performance[ctrl.get("dataKey")] > 0||performance[ctrl.get("businessDataKey")]) {
						option.calculable = false;
						return;
					}
				});
			},

			/**
			 * 将原始值转换为需要的series配置
			 */
			_translateSeriesDataItem: function(performance){
				if(overviewOrCenterSwitch == "business"){
					if(this.get("businessDataKey")){
						var value = performance[this.get("businessDataKey")];
					}else{
						var value = performance[this.get("dataKey")];
					}
				}else{
					var value = performance[this.get("dataKey")];
				}
				
				var name = performance["name"];
				var valueItem = {
						value: value,
						name: name
					};
				return valueItem;
			},

			/**
			 * 将原始值转换为图的xAxis配置
			 */
			_translateLegendDataItem: function(performance){
				var xAxisData;
				xAxisData = performance.name;
				return xAxisData;
			},

			/**
			 * 将原始值转换为柱形图的配置
			 */
			_translateDataToOption: function(data, legendData, seriesData){
				var view = this;
				forEach(data, function(performance){
					var valueItem = view._translateSeriesDataItem(performance);
					legendData.push(performance.name);
					seriesData.push(valueItem);
				});
			}
		});

		APM.ui.Pie = PieView;

		return PieView;
	}
);